<template>
  <!--按钮-->
  <div style="margin-top: 20px; margin-bottom: 20px">
    <el-button type="danger" :icon="Plus" @click="AddHistory"
      >新增</el-button
    >
    <el-button type="danger" :icon="DocumentAdd" disabled>保存</el-button>
    <el-button type="danger" :icon="BottomRight" disabled>撤销</el-button>
    <el-button type="danger" :icon="Delete" disabled>删除</el-button>
  </div>
  <hr size="6" style="background-color: rgb(232.8, 233.4, 234.6)" />
  <!--表格-->
  <table>
    <tr>
      <td width="150">编号</td>
      <td width="150">种母耳号</td>
      <td width="150">配种日期</td>
      <td width="150">种公耳号</td>
      <td width="150">妊检时间</td>
      <td width="150">妊检结果</td>
      <td width="150">分娩时间</td>
      <td width="150">健仔数</td>
      <td width="150">健仔总重</td>
      <td width="150">弱仔数</td>
      <td width="150">畸形数</td>
      <td width="150">死胎数</td>
      <td width="150">木乃伊数</td>
      <td width="150">畸胎数</td>
      <td width="150">当前胎次</td>
      <td width="150">断奶日期</td>
      <td width="150">断奶只数</td>
      <td width="150">断奶窝重</td>
    </tr>

    <tr v-for="(item, index) in form" :key="index">
      <td width="180"><el-input :value="index + 1" /></td>
      <td width="180">
        <el-select v-model="item.motherEarNumber" placeholder="请选择" clearable>
          <el-option
            v-for="basic in basicInforList.filter((x:any)=>x.gender==2)"
            :key="basic.basicInforId"
            :label="basic.earNumber"
            :value="basic.earNumber"
          />
        </el-select>
      </td>
      <td width="180">
        <el-date-picker
          v-model="item.breedingDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择时间"
          :size="size"
        />
      </td>
      <td width="180">
        <el-select v-model="item.fatherEarNumber" placeholder="请选择" clearable>
          <el-option
            v-for="basic in basicInforList.filter((x:any)=>x.gender==1)"
            :key="basic.basicInforId"
            :label="basic.earNumber"
            :value="basic.earNumber"
          />
        </el-select>
      </td>
      <td width="180">
        <el-date-picker
          v-model="item.pregnancycheckDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择时间"
          :size="size"
        />
      </td>
      <td width="180"><el-input v-model="item.pregnancycheckResults" /></td>
      <td width="180">
        <el-date-picker
          v-model="item.deliveryDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择时间"
          :size="size"
        />
      </td>
      <td width="180"><el-input v-model="item.healthyoffspringcount" /></td>
      <td width="180"><el-input v-model="item.healthyoffspringWeight" /></td>
      <td width="180"><el-input v-model="item.weakoffspringcount" /></td>
      <td width="180"><el-input v-model="item.deformitiescount" /></td>
      <td width="180"><el-input v-model="item.stillbirthscount" /></td>
      <td width="180"><el-input v-model="item.mummiescount" /></td>
      <td width="180"><el-input v-model="item.teratomascount" /></td>
      <td width="180"><el-input v-model="item.currentparity" /></td>
      <td width="180">
        <el-date-picker
          v-model="item.weaningDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择时间"
          :size="size"
        />
      </td>
      <td width="180"><el-input v-model="item.weanedQuantity" /></td>
      <td width="180"><el-input v-model="item.weaningWeight" /></td>
    </tr>
  </table>
  <!--增行 删行-->
  <div>
    <el-button type="danger" link @click="addRow">+增行</el-button>
    <el-button
      type="danger"
      link
      @click="removeRow"
      :disabled="form.length <= 0"
      >-删行</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { type FormInstance, type FormRules } from "element-plus";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import {
  Plus,
  Delete,
  DocumentAdd,
  BottomRight,
} from "@element-plus/icons-vue";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
const route = useRoute();

const size = ref<"default" | "large" | "small">("default");

//当前时间
const date = new Date();

//响应式数据 获取栋舍
const condition = reactive({
  pageIndex: 1,
  pageSize: 100,
  bedroomTypeId: 0,
  bedroomName: "",
  personName: "",
});

const form = ref<any>([
  {
    pigHistoryId: 0,
    breedingDate: "",
    motherEarNumber: "",
    fatherEarNumber: "",
    pregnancycheckDate: "",
    pregnancycheckResults: "",
    deliveryDate: "",
    healthyoffspringcount: 0,
    healthyoffspringWeight: 0,
    weakoffspringcount: 0,
    deformitiescount: 0,
    stillbirthscount: 0,
    mummiescount: 0,
    teratomascount: 0,
    currentparity: 0,
    weaningDate: "",
    weanedQuantity: 0,
    weaningWeight: 0,
  },
]);

//增行 删行
const addRow = () => {
  form.value.push({
    pigHistoryId: 0,
    breedingDate: "",
    motherEarNumber: "",
    fatherEarNumber: "",
    pregnancycheckDate: "",
    pregnancycheckResults: "",
    deliveryDate: "",
    healthyoffspringcount: 0,
    healthyoffspringWeight: 0,
    weakoffspringcount: 0,
    deformitiescount: 0,
    stillbirthscount: 0,
    mummiescount: 0,
    teratomascount: 0,
    currentparity: 0,
    weaningDate: "",
    weanedQuantity: 0,
    weaningWeight: 0,
  });
  console.log(form.value);
};
const removeRow = () => {
  if (form.value.length > 0) {
    form.value.pop();
  }
};

//新增
const AddHistory = () => {
  console.log(form.value);
  const obj = {
    pigHistories: form.value,
  };
  axios
    .post(apiBedinUrl+"/api/PigHistorys/AddPigHistory", obj)
    .then((res) => {
      if (res.data.code == 0) {
        ElMessage.success("添加种母历史成功");
      } else {
        ElMessage.error("添加种母历史失败");
      }
    });
};

//获取耳号
const basicInforList: any = ref([]);
const handlebasicInfor = () => {
  axios.post(apiBedinUrl+"/api/Basics/SearchBasic", {}).then((res) => {
    basicInforList.value = res.data.data;
  });
};

//生命周期钩子
onMounted(() => {
  handlebasicInfor();
});
</script>

<style scoped></style>
